<template>
	<view class="user-chat-item">
		<view class="user-chat-list flex-row " :class="item.isme?'justify-end me-chat':'justify-start'" style="gap: 24rpx;">
			<!-- 好友 -->
			<u-image v-if="!item.isme" width="80rpx" height="80rpx" :src="item.avatar" shape="circle" />
			<view class="user-chat-list-body flex-col" :class="item.isme?'items-end':''">
				<!-- 文字 -->
				<view class="msg-text" v-if="item.isPicture==0">{{item.content}}</view>
				<!-- 图片 -->
				<view class="flex-row">
					<u-icon v-if="item.sendError" name="info-circle-fill" color="#ff3131" size="28"></u-icon>
					<u-image v-if="item.isPicture==1" width="200rpx" height="200rpx" :src="item.content" border-radius="16"
						@click="previewImage(item.content)" />
				</view>
				<!-- 地图 -->
				<view class="flex-row" :class="item.isme?'justify-end':'justify-start'" style="width: 100vw;" v-if="item.isPicture==2">
					<map style="
					    width: 70%;
					    height: 300rpx;
					    border-radius: 16rpx 16rpx 16rpx 16rpx;
					    overflow: hidden;
					  " :latitude="item.content.lat" :longitude="item.content.lng" :markers="item.covers">
					</map>
				</view>
				<view v-if="item.createTime" class="time mt-10">
					{{item.createTime}}
				</view>
			</view>
			<!-- 我的 -->
			<u-image v-if="item.isme" width="80rpx" height="80rpx" :src="item.avatar" shape="circle" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			index: Number
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					current: url,
					loop: true,
					urls: [url]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-chat-item {
		padding-top: 32rpx;

		.user-chat-list {
			.user-chat-list-body {
				.time {
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}

				.msg-text {
					max-width: 394rpx;
					;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					padding: 24rpx;
					background: #F6F6F6;
					border-radius: 26rpx;
				}
			}
		}

		.me-chat {
			.user-chat-list-body {
				.msg-text {
					background: #FCD610;
				}
			}
		}
	}
</style>